<%@ page import="com.ws.haungjia.utils.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图管理</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

    <style>
        .carousel-img {
            width: 120px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        .search-container {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .table-container {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .operation-cell .btn {
            padding: 3px 8px;
            font-size: 14px;
        }
        .sort-input {
            width: 60px;
            text-align: center;
        }
        .status-toggle {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container-fluid py-3">
    <h2 class="mb-3">附属图管理</h2>

    <!-- 查询区域 -->
    <div class="search-container">
        <form class="row g-2">
            <div class="col-md-3 align-self-end">
                <button type="button" class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#addModal">
                    <a href="${pageContext.request.contextPath}/fushu/tiaozhuan?packageID=${id}">1增加附属图</a>
                </button>
            </div>
        </form>
    </div>

    <!-- 轮播列表 -->
    <div class="table-container">
        <table class="table table-hover">
            <thead>
            <tr>
                <th width="10%">编号</th>
                <th width="20%">附属图</th>
                <th width="20%">所属线路</th>
                <th width="25%">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${fushutu}" var="carousel">
                <tr>
                    <td>${carousel.tid}</td>
                    <td><img src="<%=Res.fileUri%>${carousel.tupian}" width="100px" height="100px"></td>
                    <td>${carousel.luxian.name}</td>
                    <td class="operation-cell">
                        <button class="btn btn-sm btn-danger ms-1">
                            <a href="${ pageContext.request.contextPath}/fushu/shan?id=${carousel.tid}&packageID=${id}">删除</a>
                        </button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<script>
    // 更新排序
    function updateSort(id, sortOrder) {
        $.ajax({
            url: '${pageContext.request.contextPath}/carousel/updateSort',
            type: 'POST',
            data: {
                id: id,
                sortOrder: sortOrder
            },
            success: function(response) {
                if(!response.success) {
                    alert('排序更新失败: ' + response.message);
                }
            }
        });
    }

    // 更新状态
    function updateStatus(id, isActive) {
        const status = isActive ? 1 : 0;
        $.ajax({
            url: '${pageContext.request.contextPath}/carousel/updateStatus',
            type: 'POST',
            data: {
                id: id,
                status: status
            },
            success: function(response) {
                if(response.success) {
                    // 更新标签文本
                    $(`label[for="status-${id}"]`).text(isActive ? '启用' : '禁用');
                } else {
                    alert('状态更新失败: ' + response.message);
                    // 恢复切换状态
                    $(`#status-${id}`).prop('checked', !isActive);
                }
            }
        });
    }

    // 编辑轮播
    function editCarousel(id) {
        window.location.href = '${pageContext.request.contextPath}/carousel/edit?id=' + id;
    }

    // 删除轮播
    function deleteCarousel(id) {
        if(confirm("确定要删除这条轮播图吗？")) {
            $.ajax({
                url: '${pageContext.request.contextPath}/carousel/delete',
                type: 'POST',
                data: {id: id},
                success: function(response) {
                    if(response.success) {
                        location.reload();
                    } else {
                        alert('删除失败: ' + response.message);
                    }
                }
            });
        }
    }

    // 保存轮播
    function saveCarousel() {
        const name = $('#inputName').val();
        const image = $('#inputImage')[0].files[0];
        const sort = $('#inputSort').val();
        const status = $('#inputStatus').is(':checked') ? 1 : 0;

        if(!name || !image) {
            alert('请填写轮播名称并上传图片');
            return;
        }

        const formData = new FormData();
        formData.append('name', name);
        formData.append('image', image);
        formData.append('sortOrder', sort);
        formData.append('status', status);

        $.ajax({
            url: '${pageContext.request.contextPath}/carousel/save',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if(response.success) {
                    location.reload();
                } else {
                    alert('保存失败: ' + response.message);
                }
            }
        });

        $('#addModal').modal('hide');
    }
</script>
</body>
</html>